<template>
<view class="page__bd">
	<custom-navbar bgColor="bg-white shadow" :isBack="true" :isHome="true">
		<block slot="backText">返回</block>
		<block slot="content">搜索</block>
	</custom-navbar>
	<view class="daui-custom search-custom" :style="[{height:CustomH + 'px'}]">
		<!-- 导航栏 -->
		<view class="daui-bar fixed bg-white" :style="[{top:CustomBar + 'px'}]" style="height:100upx;padding-right: 0;">
			<view class="search-form round">
				<view class="iconfontzz icon-search"></view>
				<input type="text" placeholder="搜索商品/品牌" @input="keyInput" :value="keyWord"></input>
				<view class="iconfontzz icon-roundclosefill text-xl text-grey padding-right-sm" v-if="keyWord!=''" @tap="clearKey"></view>
			</view>
			<view class="action">
				<text class="text-orange" @tap="searchToGoods(keyWord)">搜索</text>
			</view>
		</view>
	</view>

	<!-- 搜索前 -->
	<block v-if="!showGoods">
		<view class="bg-white solid-top padding-tb">
			<view class="flex align-center justify-between padding-lr">
				<view class="text-bold">热门搜索</view>
			</view>
			<view class="margin-top-sm fle flex-wrap padding-lr-sm">
				<view v-for="(item,index) in hotsearchList" :key="index" class="daui-tag daui-tag_default round" @tap="searchToGoods(item.name)">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="bg-white solid-top padding-tb" v-if="searchhistNum>0">
			<view class="flex align-center justify-between padding-lr">
				<view class="text-bold">搜索历史</view>
				<view class="icon-deletefill" @tap="clearHistory"></view>
			</view>
			<view class="margin-top-sm fle flex-wrap padding-lr-sm">
				<view v-for="(item,index) in searchhistList" :key="index" class="daui-tag daui-tag_default round margin-xs" @tap="searchToGoods(item.name)">
					{{item.name}}
				</view>
			</view>
		</view>
	</block>
	<!-- 键入关键词时 -->
	<view class="cu-list menu KeyList bg-gray solid-top" v-if="productList.length>0&&!showGoods" :style="keyListStyle">
		<view class="cu-item" v-for="(item,index) in searchKeyList" :key="index" @tap="searchToGoods(item.key)">
			<view class="content">
				<text class="text-grey">{{item.key}}</text>
			</view>
			<view class="action">
				约 {{item.num}} 件商品
			</view>
		</view>
	</view>
	<!-- 搜索后 -->
	<block v-if="showGoods">
		<block v-if="productList.length>0">
			<view class="product-list bui-wapcustom">
				<block v-for="(item,index) in productList" :key="index">
					<view class="daui-media daui-media_appmsg daui-media_product">
						<view class="daui-media__hd">
							<image :src="item.picurl_show" mode="scaleToFill" lazy-load="true" class="daui-media__thumb"></image>
						</view>
						<view class="daui-media__bd">
							<view class="daui-media__prodtitle" @tap="openProductDetail(item.pid)">{{item.name}}</view>
							<view class="daui-flex bui-brand">
								<view class="daui-flex__item">
									品牌：{{item.brand_name}}
								</view>
								<view class="daui-flex__item">
									产地：{{item.originplace}}
								</view>
							</view>
							<view class="flex justify-between align-end margin-top-xs">
								<view class="flex align-center flex-sub" v-if="item.is_visible">
									<text class="text-price text-red text-lg">{{item.real_price}}</text>
								</view>
								<view class="flex align-center flex-sub" v-else>
									<view class="text-red text-sm flex-sub">{{item.real_price}}</view>
								</view>
								<view class="padding-left-xl text-right">
									<text class="iconfontzz icon-gouwuche text-red text-xxl"></text>
								</view>
							</view>
							<view class="margin-top-xs" v-if="0">
								<text class="text-price text-red text-xl">{{item.real_price}}</text>
								<text class="text-price text-gray text-del text-lg margin-left-xs">{{item.origin_price}}</text>
							</view>
							<view class="flex justify-between align-end" v-if="0">
								<view class="flex align-center flex-sub">
									<view class="text-gray text-sm flex-sub">已售{{item.sale_num}}</view>
								</view>
								<view class="padding-left-xl text-right">
									<button class="daui-btn bg-orange round shadow sm"><text class="icon-lightfill"> </text>抢购</button>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
			<view class="daui-load margin-bottom" :class="!isLoad?'loading':'over'"></view>
		</block>
		<block v-else>
			
		</block>
	</block>
	
	<!--toast提示-->
	<daui-toast ref="toast"></daui-toast>
</view>
</template>

<script>
import danceuiTool from '../../utils/danceuiTool';
import http from "../../server/api-product.js";
export default {
	data() {
		return {
			StatusBar: this.StatusBar,
			CustomBar: this.CustomBar,
			keyWord: '',
			hotsearchList: [],
			searchhistNum: 0,
			searchhistList: [],
			searchKeyList: [],
			showGoods: false,
			isLoad: true,
			productList: []
		}
	},
	computed: {
		style() {
			var StatusBar = this.StatusBar;
			var CustomBar = this.CustomBar;
			var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
			return style
		},
		CustomH() {
			return this.CustomBar + uni.upx2px(0)
		},
		keyListStyle() {
			var CustomBar = this.CustomBar;
			var fixedBar = uni.upx2px(100);
			var keyListStyle = `top:${CustomBar + fixedBar}px;height:calc(100vh - ${CustomBar + fixedBar}px);`;
			return keyListStyle
		}
	},
	onLoad(options){
		console.log('onLoad的参数:', options);
		this.keyword = options.keyword ? options.keyword : '';
		if(this.keyword){
			this.searchToGoods(this.keyword);
		}else{
			this._getData();
		}
	},
	methods: {
		async _getData(){ //请求并获取数据
			const token = uni.getStorageSync('token');
			let headers = {"Authorization":"Bearer "+token};
			var param = {
				keyword: this.keyword
			}
			let ret = await http.search(this.$refs.toast, param, headers);
			console.log('search页面,获取到的数据：', ret);
			var retData = ret.data;
			this.hotsearchList = retData.hotsearchList;
			this.firstSearch = '大家都在搜：'+retData.firstSearch;
			this.searchhistNum = retData.searchhistNum;
			this.searchhistList = retData.searchhistList;
		},
		BackPage() {
			uni.navigateBack({
				delta: 1
			});
		},
		// 键入关键词
		keyInput(e) {
			this.keyWord = e.detail.value;
			this.goodsList = [];
			this.showGoods = false;
			if (e.detail.cursor > 0) {
				this.showSearchKeyList();
			} else {
				this.searchKeyList = []
			}
		},
		// 清除关键词
		clearKey(e) {
			this.keyWord = '';
			this.searchKeyList = [];
			this.goodsList = [];
			this.showGoods = false;
		},
		// 根据关键词推荐完整关键词
		showSearchKeyList() {
			let keyWord = this.keyWord;
			// 关键词推荐请求
			switch (keyWord) {
				case 'a':
					this.searchKeyList = [{
						key: 'aa',
						num: 1234
					}, {
						key: 'aaa',
						num: 234
					}, {
						key: 'abb',
						num: 34
					}, {
						key: 'abc',
						num: 4
					}]
					break;
				case 'aa':
					this.searchKeyList = [{
						key: 'aa',
						num: 1234
					}, {
						key: 'aaa',
						num: 234
					}, {
						key: 'aab',
						num: 134
					}, {
						key: 'aac',
						num: 48
					}]
					break;
				case 'b':
					this.searchKeyList = [{
						key: 'ba',
						num: 1234
					}, {
						key: 'baa',
						num: 3234
					}, {
						key: 'bab',
						num: 34
					}, {
						key: 'bbc',
						num: 44
					}]
					break;
				case 'c':
					this.searchKeyList = [{
						key: 'cc',
						num: 8
					}]
					break;
				default:
					this.searchKeyList = []
			}
		},
		// 根据关键词搜索商品
		async searchToGoods(keyword) {
			console.log('搜索的关键词是:', keyword);
			if(!keyword){
				danceuiTool.showToast(this.$refs.toast, '搜索关键词不能为空');
				return;
			}
			const token = uni.getStorageSync('token');
			let headers = {"Authorization":"Bearer "+token};
			var param = {
				keyword: keyword
			}
			let ret = await http.searchDoSearch(this.$refs.toast, param, headers);
			var retData = ret.data;
			console.log('searchDoSeach,获取到的数据：', retData);
			this.productList = retData.productList;
			this.showGoods = true
		},
		// 清除历史记录
		async clearHistory() {
			const token = uni.getStorageSync('token');
			let headers = {"Authorization":"Bearer "+token};
			let ret = await http.searchDoClear(this.$refs.toast, {}, headers);
			var retData = ret.data;
			console.log('获取到的数据：', retData);
		},
		openProductDetail: function(pid) {
			uni.navigateTo({
				url: '/pages/product/productDetail?pid='+pid
			});
		}
	}
}
</script>

<style>
	.KeyList {
		position: fixed;
		width: 100%;
		left: 0;
	}
	
	.daui-badge{}
</style>